<template>
	<div class="cus-select">
		<div class="item-con d-flex" @click="changeShow">
			<el-input readonly :placeholder="placeholder" v-model="name" />
			<i class="el-icon-caret-bottom icon"></i>
		</div>
		<van-popup v-model="popShow" round position="bottom">
			<van-picker
				ref="van_picker"
				show-toolbar
				:columns="columns"
				@confirm="confirm"
				@cancel="cancel"
				:default-index="defaultIdx"
			/>
		</van-popup>
	</div>
</template>

<script>
import { Picker, Popup } from "vant";
export default {
	components: {
		VanPicker: Picker,
		VanPopup: Popup
	},
	props: {
		List: Array,
		label: String,
		prop: String,
		placeholder: String,
		filt: {
			type: Boolean,
			default: false
		},
		value: [String, Number]
	},
	data() {
		return {
			name: "",
			popShow: false,
			columns: [],
			defaultIdx: null
		};
	},
	watch: {
		popShow(e) {
			if (!e) {
				let idx = this.List.findIndex((v) => v[this.prop] == this.value);
				this.$refs.van_picker.setIndexes([idx]);
			}
		}
	},
	methods: {
		confirm(e) {
			this.name = e.text;
			this.$emit("input", e.value);
			this.$emit("change");
			this.popShow = false;
		},
		cancel() {
			this.popShow = false;
		},
		changeShow() {
			this.columns = this.List.map((v) => ({
				text: v[this.label],
				value: v[this.prop]
			}));
			this.popShow = true;
		}
	},
	mounted() {
		if (this.filt) {
			let arr = this.List.filter((v) => this.value == v[this.prop]);
			this.name = arr[0][this.label];
		}
		let idx = this.List.findIndex((v) => v[this.prop] == this.value);
		this.defaultIdx = idx;
	}
};
</script>

<style lang="scss" scoped>
.d-flex {
	display: flex;
}
.cus-select {
	.item-con {
		align-items: center;
		padding-bottom: 0.2rem;
		border-bottom: 1px solid #dfdfdf;
		.icon {
			color: #999;
		}
	}
}
</style>